<div class="tlp-framed-horizontally">
    <section class="tlp-pane">
        <div class="tlp-pane-container">
            <div class="tlp-pane-header">
                <h1 class="tlp-pane-title"><i class="tlp-pane-title-icon fa fa-tags"></i> {{ title }}</h1>
            </div>
            <section class="tlp-pane-section">
                <div class="tlp-table-actions">
                    <button type="button"
                            class="tlp-button-primary tlp-table-actions-element project-labels-table-add-button"
                            data-modal-id="project-label-add">
                        <i class="fa fa-plus tlp-button-icon"></i> {{ add_label }}
                    </button>
                    {{# has_labels }}
                        <div class="tlp-table-actions-spacer"></div>
                        <div class="tlp-form-element tlp-table-actions-element">
                            <input type="search"
                                   class="tlp-search"
                                   id="project-labels-table-filter"
                                   data-target-table-id="project-labels-table"
                                   autocomplete="off"
                                   placeholder="{{ filter_placeholder }}">
                        </div>
                    {{/ has_labels }}
                </div>
                <table class="tlp-table" id="project-labels-table" data-existing-labels-names="{{ json_encoded_label_names }}">
                    <thead>
                        <tr>
                            <th class="tlp-table-cell-filterable project-labels-table-name">{{ name_label }}</th>
                            <th class="project-labels-table-is-used">{{ is_used_label }}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {{^ has_labels }}
                            <tr>
                                <td colspan="3" class="tlp-table-cell-empty">
                                    {{ empty_state }}
                                </td>
                            </tr>
                        {{/ has_labels }}
                        {{# has_labels }}
                            <tr class="tlp-table-empty-filter">
                                <td colspan="3" class="tlp-table-cell-empty">
                                    {{ empty_filter }}
                                </td>
                            </tr>
                            {{# labels }}
                                <tr>
                                    <td class="tlp-table-cell-filterable">
                                        <i class="fa
                                            {{# is_outline }}fa-circle-o{{/is_outline}}
                                            {{^ is_outline }}fa-circle{{/is_outline}}
                                            project-labels-table-name-icon
                                            project-labels-table-name-icon-{{ color }}
                                        "></i> {{ name }}
                                    </td>
                                    <td>
                                        {{# is_used }}
                                            <span class="tlp-tooltip tlp-tooltip-bottom project-labels-table-is-used-help"
                                                  data-tlp-tooltip="{{ this_label_is_used }}"
                                            >
                                                <i class="fa fa-check"></i>
                                            </span>
                                        {{/ is_used }}
                                    </td>
                                    <td class="tlp-table-cell-actions">
                                        <button
                                            class="tlp-table-cell-actions-button tlp-button-primary tlp-button-small tlp-button-outline project-labels-table-edit-button"
                                            data-modal-id="project-label-edit-{{ id }}"
                                        >
                                            <i class="fa fa-pencil tlp-button-icon"></i> {{ edit_button }}
                                        </button>
                                        <button
                                            class="tlp-table-cell-actions-button tlp-button-small tlp-button-danger tlp-button-outline project-labels-table-delete-button"
                                            data-modal-id="project-label-delete-{{ id }}"
                                        >
                                            <i class="fa fa-trash-o tlp-button-icon"></i> {{ delete_button }}
                                        </button>
                                    </td>
                                </tr>
                            {{/ labels }}
                        {{/ has_labels }}
                    </tbody>
                </table>
                {{# default_label }}
                    {{> label-modal-add }}
                {{/ default_label }}
                {{# labels }}
                    {{> label-modal-edit }}
                    {{> label-modal-delete }}
                {{/ labels }}
            </section>
        </div>
    </section>
</div>
